<template>
  <view class="nav_main">
    <view
      v-for="(item, index) in data"
      :key="item.id"
      :class="{ 'tool-box': true, item: true, item_act: current == index }"
      @click="change(index)"
    >
      {{ item.kindName }}
    </view>
  </view>
</template>

<script setup lang="ts">
  import type { MealKindType } from '@/types/mealkind';

  const emit = defineEmits(['change']);

  defineProps<{
    data: MealKindType[];
    current: number;
  }>();

  function change(index) {
    emit('change', index); // 当前值 + 进步值
  }
</script>

<style lang="scss">
  @import './styles/nav.scss';
</style>
